<template>
  <div class="container"  >
    <el-menu :collapse="collapse" :default-openeds="['1']" 
    :unique-opened="true" 
    :router="true" 
    background-color="rgb(83,84,87)"
    text-color="#fff" >
      <!-- 子菜单 -->
      <el-submenu :index="menu.id" v-for="(menu,index) in menuData" :key="index">
        <template slot="title">
          <i :class="menu.icon" style="color:white"></i>
          <span>{{menu.title}}</span>
        </template>
        <!-- 菜单项 -->
        <el-menu-item
          :index="item.id"
          :route="item.path"
          v-for="(item,index) in menu.items"
          :key="index"
        >{{item.title}}</el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>
<script>
export default {
  name: "",
  props: ["collapse"],
  data() {
    return {
      menuData: [
        {
          id: "1",
          title: "系统管理",
          icon: "el-icon-setting",
          items: [
            {
              id: "1-1",
              path: "/admin",
              title: "管理员列表",
            },
            {
              id: "1-2",
              path: "/user",
              title: "用户列表",
            },            
          ],
        },
        {
          id: "2",
          title: "商品管理",
          icon: "el-icon-goods",
          items: [
            {
              id: "2-1",
              path: "/goods",
              title: "商品列表",
            },
            {
              id: "2-2",
              path: "/type",
              title: "商品类别",
            },
            {
              id: "2-3",
              path: "/brand",
              title: "品牌管理",
            },                        
          ],
        },
        {
          id: "3",
          title: "订单管理",
          icon: "el-icon-document-copy",
          items: [
            {
              id: "3-1",
              path: "/address",
              title: "地址管理",
            },
            {
              id: "3-2",
              path: "/order",
              title: "订单管理",
            },                    
          ],
        }, 

      ],
    };
  },
  created() {},
  mounted() {},
  methods: {},
};
</script>

<style lang="" scoped>


</style>